<div data-test-subj="statusPageContainer" class="container overall_state_default overall_state_{{ui.serverState}}">
  <header>
    <h1>
      Status: <span class="overall_state_color">{{ ui.serverStateMessage }}</span>
      <i class="fa overall_state_color state_icon" />
      <span class="pull-right">
        {{ ui.name }}
      </span>
    </h1>
  </header>

  <div class="row metrics_wrapper">
    <div ng-repeat="metric in ui.metrics">
      <status-page-metric metric="metric"></status-page-metric>
    </div>
  </div>

  <div class="row statuses_wrapper">
    <h3>Status Breakdown</h3>

    <div ng-if="!ui.statuses && ui.loading" class="statuses_loading">
      <span class="spinner"></span>
    </div>

    <h4 ng-if="!ui.statuses && !ui.loading" class="statuses_missing">
      No status information available
    </h4>

    <table class="statuses" data-test-subj="statusBreakdown" ng-if="ui.statuses">
      <tr class="row">
        <th class="col-xs-4" scope="col">ID</th>
        <th class="col-xs-8" scope="col">Status</th>
      </tr>
      <tr
        ng-repeat="status in ui.statuses"
        class="status status_state_default status_state_{{status.state}} row">

        <td class="col-xs-4 status_id">{{status.id}}</td>
        <td class="col-xs-8 status_message">
          <i class="fa status_state_color status_state_icon" />
          {{status.message}}
        </td>
      </tr>
    </table>
  </div>

  <footer class="row">
    <div class="col-xs-12 text-right build-info">
      Build {{::ui.buildInfo.num}}, Commit SHA {{::ui.buildInfo.sha}}
    </div>
  </footer>
</div>
